<script lang="ts" setup>
defineProps<{ value?: string; title?: string; extra?: string }>();
</script>

<template>
  <div class="umrp-statistic">
    <div class="commnet" v-if="title">{{ title }}</div>
    <div class="value">
      <slot name="value" v-if="$slots.value"></slot>
      <div v-else>{{ value }}</div>
    </div>
    <div class="extra" v-if="extra">{{ extra }}</div>
    <slot name="extra" v-else></slot>
  </div>
</template>

<style lang="scss" scoped>
.umrp-statistic {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  background-color: var(--bg-color);
  padding: 10px;
}
</style>
